<template>
  <div class="home">
     home
    <button @click="add">改变state</button>
    <p>{{this.$store.state.num}}</p>
    <p>{{storeNum}}</p>
    <p>
      <router-link to="/city"><button>{{this.$store.state.city}}</button></router-link>
     </p>
     <keep-alive>
       <router-view/>
     </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods:{
    add(){
      this.$store.dispatch("addNum")
    }
  },
  mounted(){
    console.log(this.$store.state.num);
    // console.log("mounted")
  },
  computed:{
    storeNum(){
      return this.$store.state.num;
    }
  },
  // beforeCreate(){
  //   console.log("beforeCreate");
  // },
  // created(){
  //   console.log("created");
  // },
  // beforeMount(){
  //   console.log("beforeMount")
  // },
  // beforeDestroy(){
  //   console.log("beforeDestroy");
  // },
  // destroyed(){
  //   console.log("destroyed");
  // }
  beforeRouteEnter(to){
    console.log(to);
  }
}
</script>
